<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
	<style>
		#chart {
			width: 800px;
			height: 400px;
		}
	</style>
	<script>
		(function (root, factory) {
			if (typeof define === 'function' && define.amd) {
				// AMD. Register as an anonymous module.
				define(['exports', 'echarts'], factory);
			} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
				// CommonJS
				factory(exports, require('echarts'));
			} else {
				// Browser globals
				factory({}, root.echarts);
			}
		}(this, function (exports, echarts) {
			var log = function (msg) {
				if (typeof console !== 'undefined') {
					console && console.error && console.error(msg);
				}
			};
			if (!echarts) {
				log('ECharts is not Loaded');
				return;
			}
			var colorPalette = ['#d87c7c','#919e8b', '#d7ab82',  '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
			echarts.registerTheme('vintage', {
				color: colorPalette,
				backgroundColor: '#fef8ef',
				graph: {
					color: colorPalette
				}
			});
		}));
	</script>
</head>
<body>
	<div id="chart"></div>
	<script text="text/javascript">
		const chartDom = document.getElementById('chart');
		const chart = echarts.init(chartDom,'vintage',{renderer:'svg'});
		chart.setOption({
			title:{
				text:'echarts 入门案例'
			},
			xAxis:{
				data:['一季度','二季度','三季度','四季度']
			},
			yAxis:{},
			dataset: {
				source: [
					[ '一季度',100,79,'分类1',50 ],
					[ '二季度',112,81,'分类2',60 ],
					[ '三季度',96,88,'分类3',55 ],
					[ '四季度',123,72,'分类4',70 ]
				]
			},
			series:[
			{// 柱状图
				type: 'bar',
				encode: { itemName:0,value:2 }
			},
			{// 饼图
				type: 'pie',
				center: ['65%',60],
				radius: 35,
				/* 分体数据源的形式
				data: [
					{ name: 'xx',value: 52 },
					{ name: 'yy',value: 30 },
					{ name: 'zz',value: 88 }
				]
				*/
				encode: { itemName:3,value:4 }
			},
			{
				type: 'line',
				encode: { x:0,y:1 }
			}
			
			]
		});
	</script>
</body>
</html>